import { User } from "@/api/interface";
import { Form, Input, Button, FormInstance, Card } from "antd";
import React, { useRef } from "react";

interface Props {
	onSearch: (data?: User.UserInfo) => void;
}

const UserFilter: React.FC<Props> = props => {
	const { onSearch } = props;

	const formRef = useRef<FormInstance | null>(null);

	const onFinish = (data: User.UserInfo) => {
		onSearch(data);
	};

	const reset = () => {
		formRef.current?.resetFields();
		onSearch();
	};

	const filterExtra = (
		<div style={{ display: "flex", gap: 8 + "px" }}>
			<Button type="primary" onClick={() => reset()}>
				重置
			</Button>
		</div>
	);

	return (
		<Card title="数据筛选" extra={filterExtra}>
			<Form ref={formRef} layout="inline" onFinish={onFinish}>
				<Form.Item label="用户名" name="name">
					<Input />
				</Form.Item>

				<Form.Item wrapperCol={{ offset: 4 }}>
					<Button htmlType="submit" type="primary"></Button>
				</Form.Item>
			</Form>
		</Card>
	);
};

export default UserFilter;
